<template>
  <div>
    <div class="ad">
      <a-row :gutter="24">
        <a-col :xl="16" :lg="16" :md="24" :sm="24">
          <div class="ad_img">
            <img v-show="recomImgMode1 == 0" class="ad_img_val1" :src="bigImgAd1" alt="" @click="goArticle(recomImgId1)"/>
            <img v-show="recomImgMode1 == 1" class="ad_img_val1_mode" :src="bigImgAd1" alt="" @click="goArticle(recomImgId1)"/>
          </div>
        </a-col>
        <a-col :xl="8" :lg="8" :md="24" :sm="24">
          <div>
            <div class="ad_img" style="margin-bottom: 15px;" @click="goArticle(recomImgId2)">
              <img v-show="recomImgMode2 == 0" class="ad_img_val2" :src="midImgAd2" alt=""/>
              <img v-show="recomImgMode2 == 1" class="ad_img_val2_mode" :src="midImgAd2" alt="" />
            </div>
            <div  class="ad_img" @click="goArticle(recomImgId3)">
              <img v-show="recomImgMode3 == 0" class="ad_img_val2" :src="midImgAd3" alt="" />
              <img v-show="recomImgMode3 == 1" class="ad_img_val2_mode" :src="midImgAd3" alt="" />
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
    <div class="">
      <div class="blog_box">
        <div class="blog_title">
          <div class="blog_title_val">热门推荐</div>
        </div>
        <div class="spin_box">
          <a-spin size="large" :spinning="spinningLoading"/>
        </div>
        <ul class="blog_list" v-show="!spinningLoading">
          <li v-for="(item, i) in list" :key="i">
            <List :item="item"></List>
          </li>
          <a-empty :description="false" v-show="list.length == 0"/>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import List from "@/components/List";
import { getIndex } from "@/api/blog";
import { Slime } from '@/mixins/slime';
export default {
  mixins: [Slime],
  components: { List },
  name: "gamePlayer",
  data() {
    return {
      list: [
        // {
        //   img: require("@/assets/img/defaultdll.png"),
        //   title: "TabFloater : 将任意标签页变成画中画的chrome插件下载",
        //   time: "06-03",
        //   summary: "TabFloater是一款可以将标签页移动到浮动窗口中来执行多任务的插件，类似于电视上的“画中画”功能", //摘要
        //   tags: "Chrome生产工具插件",
        // },
      ],
      bigImgAd1: require("@/assets/img/defaultdll.png"),
      recomImgId1:0,
      recomImgMode1:0,
      midImgAd2: require("@/assets/img/defaultdll.png"),
      recomImgId2:0,
      recomImgMode2:0,
      midImgAd3: require("@/assets/img/defaultdll.png"),
      recomImgId3:0,
      recomImgMode3:0,
      //文章加载
      spinningLoading:false,
    };
  },
  created() {
    this.init();
  },
  methods: {
    init(){
      // axios.get('http://192.168.133.67:8003/article/downloadInfo',{params:{id:1,code:123}}).then(res => {
      //   console.log(res)
      // }).catch(function (error) {
      //   console.log(error)
      // })
      this.spinningLoading = true;
      getIndex().then(
        (res) => {
          let data = res.result;
          //hot
          this.bigImgAd1 = this.imgD(data,1);
          this.recomImgId1 = this.idD(data,1);
          this.recomImgMode1 = this.modeD(data,1);

          this.midImgAd2 = this.imgD(data,2);
          this.recomImgId2 = this.idD(data,2);
          this.recomImgMode2 = this.modeD(data,2);

          this.midImgAd3 = this.imgD(data,3);
          this.recomImgId3 = this.idD(data,3);
          this.recomImgMode3 = this.modeD(data,3);
          //top
          this.list = data.top.map((obj) => {
            obj = {
              id:obj.id,
              img: obj.img?obj.img:require("@/assets/img/defaultdll.png"),
              title: obj.title,
              time: obj.createTime,
              browse: obj.browse,
              summary: obj.summary, //摘要
              tags: obj.categoryName,
              mode:obj.mode,
            } 
            return obj
          })
        },
        (err) => {
          this.$message.warning("提交失败");
        }
      ).finally(() => {
        this.spinningLoading = false;
      });
    },
    onChange() {},
  },
};
</script>

<style scoped>
.ad {
  padding: 20px 0px;
}
.ad_img {
  width: 100%;
  text-align: center;
  background-color: #fff;
  border-radius: 10px;
}
.ad_img_val1 {
  width: 100%;
  height: 384px;
  border-radius: 10px;
}
.ad_img_val1_mode{
  max-width: 100%;
  height: 384px;
}
.ad_img_val2 {
  width: 100%;
  height: 185px;
  border-radius: 10px;
}
.ad_img_val2_mode{
  max-width: 100%;
  height: 185px;
}
.ad_img_val3 {
  width: 100%;
  border-radius: 10px;
}
.breadcrumb {
  width: 100%;
  margin: 15px;
  overflow: hidden;
}
.breadcrumb_left {
  float: left;
}
.breadcrumb_right {
  float: left;
}
</style>
